<html>
<head>
  <title>Simple client</title>

  <script type="text/javascript">



    var ws;

    function init() {

      // Connect to Web Socket
      ws = new WebSocket("ws://192.168.1.5:9001/");

      // Set event handlers.
      ws.onopen = function() {
        output("onopen");
      };
      
      ws.onmessage = function(e) {
	    document.getElementById('img').src = 'http://192.168.1.5:8080/image/desktop'+e.data;
        document.getElementById("img").style.width="1366px";
        document.getElementById("img").style.height="768px";

      };
      
      ws.onclose = function() {
        output("onclose");
      };

      ws.onerror = function(e) {
        output("onerror");
        console.log(e)
      };

    }
    
    function onSubmit() {
      var input = document.getElementById("input");
      // You can send message to the Web Socket using ws.send.
      ws.send(input.value);
      output("send: " + input.value);
      input.value = "";
      input.focus();
    }
    
    function onCloseClick() {
      ws.close();
    }
    
    function output(str) {
      var log = document.getElementById("log");
      var escaped = str.replace(/&/, "&amp;").replace(/</, "&lt;").
        replace(/>/, "&gt;").replace(/"/, "&quot;"); // "
      log.innerHTML = escaped + "<br>" + log.innerHTML;
    }


            function click1 (event){
                var data2 = getXAndY(event);
                var x2 = data2.x;
                var y2 = data2.y;
                ws.send(x2+','+y2);
                console.log("相对坐标："+x2+","+y2);
            }

            //获取鼠标点击区域中的相对位置坐标
            function getXAndY(event){
                //鼠标点击的绝对位置
                Ev= event || window.event;
                var mousePos = mouseCoords(event);
                var x = mousePos.x;
                var y = mousePos.y;
                //alert("鼠标点击的绝对位置坐标："+x+","+y);

                //获取div在body中的绝对位置
                var x1 = document.getElementById('img').offsetLeft;
                var y1 = document.getElementById('img').offsetTop;
              //  var x1 = $("#pic").offset().left;
               // var y1 = $("#pic").offset().top;
                //alert("div在body中的绝对位置坐标："+x1+","+y1);

                //鼠标点击位置相对于div的坐标
                var x2 = x - x1;
                var y2 = y - y1;
                return {x:x2,y:y2};
            }

            //获取鼠标点击区域在Html绝对位置坐标
            function mouseCoords(event){
                if(event.pageX || event.pageY){
                    return {x:event.pageX, y:event.pageY};
                }
                return{
                    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:event.clientY + document.body.scrollTop - document.body.clientTop
                };
            }



  </script>


</head>
<body onload="init();">
<!--  <form onsubmit="onSubmit(); return false;">
    <input type="text" id="input">
    <input type="submit" value="Send">
    <button onclick="onCloseClick(); return false;">close</button>
  </form>-->

  <div id="log"></div>
  <img src="" id="img"  onclick="click1(event)"/>
</body>
</html>
